<template>
    <div class="menuContainer">
        <div class="searchContainer">
            <span class="inputLabel">菜单名称</span>
            <el-input
                v-model="menuName"
                placeholder="菜单名称"
                class="searchInfoInput"
            >
                <template #prepend>
                    <el-select v-model="menuNameSelect" style="width: 90px">
                        <el-option label="中文" value="1" />
                        <el-option label="英文" value="2" />
                    </el-select>
                </template>
            </el-input>

            <span class="inputLabel">状态</span>
            <el-select v-model="menuStatus" placeholder="状态" class="searchInfoInput" clearable>
                <el-option label="正常" value="NORMAL" />
                <el-option label="停用" value="DISABLE" />
            </el-select>

            <el-button type="primary" icon="SearchOutlined" class="searchButtonClass" :loading="searchLoading" @click="queryMenuInfo()">搜索</el-button>
            <el-button icon="RedoOutlined" @click="resetInput()">重置</el-button>
        </div>
        <div class="insertContainer">
            <el-button type="primary" plain size="small" icon="PlusOutlined" @click="addMenu()">添 加</el-button>
            <el-button plain size="small" icon="UpOutlined" v-if="upOrDownStatus" @click="changeUpOrDownStatus()">展 开</el-button>
            <el-button plain size="small" icon="DownOutlined" v-else @click="changeUpOrDownStatus()">收 起</el-button>
        </div>
        <div class="mainInfoContainer">
            <el-table
                :data="menuDataList"
                style="width: 100%; margin-bottom: 20px; margin-top: 20px;"
                row-key="id"
                border
                :default-expand-all="isExpandAll"
                :stripe="true"
                :expand-row-keys="[]"
                :show-overflow-tooltip="true"
                max-height="70vh"
            >
                <el-table-column prop="name" label="菜单名称-英文" />
                <el-table-column prop="cnName" label="菜单名称-中文" />
                <el-table-column prop="iconType" label="菜单图标" />
                <el-table-column prop="routeTo" label="路由全量地址" />
                <el-table-column prop="routePath" label="路由地址" />
                <el-table-column prop="componentPath" label="菜单组件路径" />
                <el-table-column prop="menuType" label="菜单类型">
                    <template #default="scope">
                        <el-tag v-if="scope.row.menuType === 'COMMON'" type="success">静态路由</el-tag>
                        <el-tag v-else type="danger">动态组件</el-tag>
                    </template>
                </el-table-column>
                <el-table-column prop="componentName" label="关联组件名称" />
                <el-table-column prop="routeRootName" label="路由文根" />
                <el-table-column prop="hidden" label="是否隐藏" align="center">
                    <template #default="scope">
                        <el-switch v-model="scope.row.hidden" @change="changeMenuIsHidden(scope.row.hidden, scope.row.id)"/>
                    </template>
                </el-table-column>
                <el-table-column prop="status" label="状态" align="center">
                    <template #default="scope">
                        <el-tag v-if="scope.row.status === 'NORMAL'" type="success">有 效</el-tag>
                        <el-tag v-else type="danger">禁 用</el-tag>
                    </template>
                </el-table-column>
                <el-table-column align="center" width="400px">
                    <template #header>
                        <span>操 作</span>
                    </template>
                    <template #default="scope">
                        <el-button type="primary" size="small" plain @click="handleJump(scope.$index, scope.row)">跳 转</el-button>
                        <el-button v-if="scope.row.tenantId !== 'base' || currentTenantId === 'ywu'" type="primary" size="small" @click="handleAdd(scope.$index, scope.row)">添 加</el-button>
                        <el-button v-if="scope.row.tenantId !== 'base' || currentTenantId === 'ywu'" size="small" type="success" @click="handleUpdate(scope.$index, scope.row)">修 改</el-button>
                        <el-button v-if="scope.row.tenantId !== 'base' || currentTenantId === 'ywu'" type="danger" size="small" @click="handleDelete(scope.$index, scope.row)">删 除</el-button>
                        <el-button v-if="scope.row.tenantId !== 'base' || currentTenantId === 'ywu'" type="warning" size="small" @click="handleAuthorisation(scope.$index, scope.row)">授 权</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <div>
            <AddMenuDialog :menuForm="menuForm"/>
        </div>
        <div>
            <DeleteDialog :deleteData="menuForm" header="删除菜单" body="是否确认删除?"/>
        </div>

        <div>
            <MenuRoleAuthorisationDialog :menuRoleAuthorisation="menuRoleAuthorisation"/>
        </div>
    </div>
</template>

<script>
import {changeIsHidden, menuAllInfoQuery, menuInfoQuery} from '@/request/menu'
import {createTag} from "@/utils/tagCreate";
import AddMenuDialog from '@/components/menu/AddMenuDialog'
import DeleteDialog from "@/components/menu/DeleteDialog";
import {componentIconInfoQuery} from "@/request/components";
import MenuRoleAuthorisationDialog from "@/components/menu/MenuRoleAuthorisationDialog";
import {ElNotification} from "element-plus";

export default {
    name: "menuManage",
    data() {
        return {
            menuNameSelect: "1",
            menuName: "",
            menuStatus: "",
            upOrDownStatus: true,
            isExpandAll: false,
            menuForm: {
                id: '',
                name: '',
                cnName: '',
                iconType: '',
                routePath: '',
                menuType: 'COMMON',
                componentId: '',
                routeRootId: '',
                componentPath: '',
                status: 'NORMAL',
                parentId: '',
                meta: '{"title": "title"}',
                orderNum: ''
            },
            menuRoleAuthorisation: {},
            searchLoading: false
        }
    },
    methods: {
        queryMenuInfo() {
            this.searchLoading = true
            let paramDataInfo = {
                status: this.menuStatus === "" ? null : this.menuStatus,
                name: this.menuNameSelect === "2" ? this.menuName : '',
                cnName: this.menuNameSelect === "1" ? this.menuName : ''
            }
            menuInfoQuery(paramDataInfo).then(res => {
                this.$store.commit('changeMenuDataList', res.data);
                this.searchLoading = false
            }).catch(res => {
                this.searchLoading = false
            })
        },
        resetInput() {
            this.menuNameSelect = "1";
            this.menuName = "";
            this.menuStatus = "";
            this.queryMenuInfo();
        },
        changeUpOrDownStatus() {
            this.upOrDownStatus = !this.upOrDownStatus;
            this.isExpandAll = !this.isExpandAll;
        },
        addMenu() {
            this.menuForm = {
                id: '',
                name: '',
                cnName: '',
                iconType: '',
                routePath: '',
                menuType: 'COMMON',
                componentId: '',
                routeRootId: '',
                componentPath: '',
                status: 'NORMAL',
                parentId: '',
                meta: '{"title": "title"}',
                orderNum: 0
            }
            this.updateDialogInfo();
            this.$store.commit('openCenterDialogVisible');
        },
        handleUpdate(index, row) {
            this.menuForm = {
                id: row.id,
                name: row.name,
                cnName: row.cnName,
                iconType: row.iconType,
                routePath: row.routePath,
                menuType: row.menuType,
                componentId: row.componentId,
                routeRootId: row.routeRootId,
                componentPath: row.componentPath,
                status: row.status,
                parentId: row.parentId,
                meta: row.meta,
                orderNum: row.orderNum
            }
            this.updateDialogInfo();
            this.$store.commit('openCenterDialogVisible');
        },
        handleAdd(index, row) {
            this.menuForm = {
                id: '',
                name: '',
                cnName: '',
                iconType: '',
                routePath: '',
                menuType: row.menuType,
                componentId: row.componentId,
                routeRootId: row.routeRootId,
                componentPath: '',
                status: 'NORMAL',
                parentId: row.id,
                meta: '{"title": "title"}',
                orderNum: 0
            }
            this.updateDialogInfo();
            this.$store.commit('openCenterDialogVisible');
        },
        handleDelete(index, row) {
            this.menuForm = {
                id: row.id,
                name: row.name,
                cnName: row.cnName,
                iconType: row.iconType,
                routePath: row.routePath,
                menuType: row.menuType,
                componentId: row.componentId,
                routeRootId: row.routeRootId,
                componentPath: row.componentPath,
                status: row.status,
                parentId: row.parentId,
                meta: row.meta
            }
            this.$store.commit('openDeleteDialogVisible');
        },
        updateDialogInfo() {
            let param = {
                pageInfo: {
                    pageIndex: 1,
                    pageSize: 1000
                }
            }
            componentIconInfoQuery(param).then(res => {
                this.$store.commit('changeIcons', res.data);
            });
            menuAllInfoQuery().then(res => {
                let gen = {
                    "id": 0,
                    "name": "origin",
                    "cnName": "根菜单",
                }
                res.data.unshift(gen);
                this.$store.commit('changeParentMenuOrCopy', res.data);
            })
        },
        handleJump(index, row) {
            this.$router.push(row.routeTo);
        },
        handleAuthorisation(index, raw) {
            this.menuRoleAuthorisation = raw;
            this.$store.state.menuRoleAuthorisationDialogVisible = true
        },
        changeMenuIsHidden(item, id) {
            let param = {
                id: id,
                hidden: item
            }
            changeIsHidden(param).then(res => {
                ElNotification({
                    title: '成功',
                    message: "SUCCESS",
                    type: 'success',
                })
            })
        }
    },
    computed: {
        menuDataList() {
            return this.$store.state.menuDataList;
        },
        currentTenantId() {
            return this.$store.state.userInfo.currentTenantInfo.tenantId
        }
    },
    created() {
        let paramDataInfo = {
            status: null,
            name: "",
            cnName: ""
        }
        menuInfoQuery(paramDataInfo).then(res => {
            this.$store.commit('changeMenuDataList', res.data);
        })
    },
    mounted() {
        createTag(this.$route, this.$store);
    },
    components: {
        AddMenuDialog,
        DeleteDialog,
        MenuRoleAuthorisationDialog
    }
}
</script>

<style scoped lang="less">
.menuContainer {
    width: 100%;
    height: 100%;
    padding-top: 0.5%;
    .searchContainer {
        width: 100%;
        height: 5%;
        display: flex;
        align-items: center;
        .searchInfoInput {
            width: 20%;
            padding-left: 1%;
        }
        .inputLabel {
            padding-left: 1%;
            font-weight: 700;
            font-size: 15px;
            color: #606266;
        }
        .searchButtonClass {
            margin-left: 1%;
        }
    }
    .insertContainer {
        width: 100%;
        height: 2%;
        display: flex;
        align-items: center;
        padding-left: 1%;
        padding-top: 0.5%;
    }
    .mainInfoContainer {
        width: 98%;
        height: 91%;
        padding-left: 1%;
    }
}

.headerRowClass {
    background: #0c4dd2;
}
</style>